<template>
  <div style="position: relative;">
    <div class="home-top" ref="top">
      <mt-header title="我的报名"><mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button></mt-header>
      <mt-search style="height: 52px;" v-model="search" @keyup.enter.native="getFilter()"></mt-search>
    </div>
    <div ref="block"></div>
    <div style="overflow:auto;" v-show="!loading" ref="wrapper">
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottomDistance="10" :topDistance="50" :autoFill="false" :bottomAllLoaded="!hasMore" ref="loadmore">
        <ul class="enroll-list">
          <li v-for="(item, index) in list">
            <div @click="$router.push('/match/' + item.id)" class="enroll-list-c">
               <p class="enroll-list-in"><i v-html="getStatus(item.status)"></i><span class="fwb">{{item.matchName}}</span></p>
               <p class="enroll-list-in"><span style="flex:1;">{{item.matchType}}</span><span style="flex:1;">{{item.project}}</span></p>
               <p class="enroll-list-in" style="display: block;"><span class="mr5" v-for="name in item.member">{{name}}</span></p>
            </div>
          </li>
        </ul>
      </mt-loadmore>
      <div class="no-more" v-show="!hasMore">没有更多…</div> 
    </div>
    <div v-show="loading" class="loading-center" ref="loadBox"><mt-spinner :type="3" color="#999" :size="20"></mt-spinner>加载中…</div>
  </div>
</template>

<script>
export default { 
  data () {
    return {
      search:'',
      list:[],
      page:1,
      loading:false,
      hasMore:false
    }
  },
  mounted: function (){
    var t_h = this.$refs.top.offsetHeight;
    this.$refs.block.style.height = t_h + "px";
    this.$refs.wrapper.style.height = document.documentElement.clientHeight - t_h + "px"; 
    this.$refs.loadBox.style.height = document.documentElement.clientHeight - t_h + "px"; 
    this.getFilter();
  },
  methods:{
    getList(type){
      if(!type) this.page = 1;
      this.list  = [
        {
          "id":"1",
          "matchName":"2019长沙岳麓区第N届羽毛球邀请赛",
          "matchType":"单项赛",
          "project":"男单、男双",
          "member":[ "张三丰","李世民","令狐冲","东方不败" ],
          "status":"1"
        },
        {
          "id":"2",
          "matchName":"2019长沙岳麓区第N届羽毛球邀请赛",
          "matchType":"单项赛",
          "project":"男单、男双",
          "member":[ "张三丰","李世民","令狐冲","东方不败" ],
          "status":"2"
        },
        {
          "id":"3",
          "matchName":"2019长沙岳麓区第N届羽毛球邀请赛",
          "matchType":"单项赛",
          "project":"男单、男双",
          "member":[ "张三丰","李世民","令狐冲","东方不败" ],
          "status":"3"
        },
        {
          "id":"4",
          "matchName":"2019长沙岳麓区第N届羽毛球邀请赛",
          "matchType":"单项赛",
          "project":"男单、男双",
          "member":[ "张三丰","李世民","令狐冲","东方不败" ],
          "status":"2"
        }
      ]

      this.loading = false;
      this.hasMore = false;

      /*setTimeout(()=>{
        this.axios.get(this._site + 'member/list', {
          params: { page: this.page, search:this.search }          
        }).then(response => {
          //设置拉拽加载结束
          this.$refs.loadmore.onTopLoaded();
          this.$refs.loadmore.onBottomLoaded();          
          var res = response.data;
          this.loading = false;
          if(res.status == 1){
            if(!type) this.list = [];
            this.list = this.list.concat(res.data);
            if(this.list.length > 30){
              this.hasMore = false;
            }else{
              this.page++;
            }
          }else{
            this.$toast({message: '加载失败'});
          }
        }).catch(error => {
          //设置拉拽加载结束
          this.$refs.loadmore.onTopLoaded();
          this.$refs.loadmore.onBottomLoaded();
          this.$toast({message: '加载失败'});
        });
      },500)*/
    },
    getFilter(){
      this.page = 1;
      this.loading = true;
      this.loadTop();
      this.$refs.wrapper.scrollTop = 0;
    },    
    loadTop(){
      this.hasMore = true;
      this.getList();
    },
    loadBottom(){
      this.getList(true);
    },
    addMember(id){
      this.$messagebox.confirm('<i style="color:#000;">您确定删除该搭档吗？</i>',null).then(action => {
        if(action == 'confirm'){
          this.$toast('删除搭档成功！');
        }
      });
    },
    getStatus(s){
      var str = ""
      if(s == "1"){
        str = "<i class='tag-1'>未完成</i>";
      }else if(s == "2"){
        str = "<i class='tag-2'>报名成功</i>";
      }
      else if(s == "3"){
        str = "<i class='tag-3'>已失效</i>";
      }
      return str;
    }
  }
}
</script>
<style>
  .enroll-list-in .tag-1,.enroll-list-in .tag-2,.enroll-list-in .tag-3{ font-size:12px; display: inline-block; vertical-align: middle; margin-right:6px; border-radius: 4px;  padding: 3px 6px; }
  .enroll-list-in .tag-1{ background: #e00; color: #fff;  }
  .enroll-list-in .tag-2{ background: #00a5ff; color: #fff;}
  .enroll-list-in .tag-3{ background: #ddd; color: #666; }
</style>
